<!DOCTYPE html>
<html>
<head>
<title>MuPDF Ecosystem</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<header>
<h1>MuPDF Ecosystem</h1>
</header>

<article>

<link rel="stylesheet" href="ecosystem.css" type="text/css">
<script type="text/javascript">

function showLightBox(str) {
	var details = "";
	switch (str) {
		case "mutool":
			details = "The command line tools are all gathered into one umbrella command: <code>mutool</code>.<p>Use this if you need to use the command line to process your documents.";

			details += "<div><code>mutool run</code></div><div>A tool for running Javascript programs with access to the MuPDF library functions.</div>";

			details += "<p/><div><code>mutool draw</code></div><div>This is the more customizable tool, but also has a more difficult set of command line options. It is primarily used for rendering a document to image files.</div>";

			details += "<p/><div><code>mutool clean</code></div><div>Rewrite PDF file. Used to fix broken files, or to make a PDF file human editable.</div>";
		break;

		case "Java Bindings":
			details = "A reflection of the C API into Java. Use this if you want to process or display documents from Java.";
		break;

		case "C++ Bindings":
			details = "A reflection of the C API into C++. Use this if you want to process or display documents from C++, for example in a .NET project.";
		break;

		case "Python Bindings":
			details = "A reflection of the C API into Python. Use this if you want to process or display documents from Python.";
		break;

		case "WASM":
			details = "Combines MuPDF with WebAssembly technology (WASM) allowing for ultra-fast, high performance PDF rendering to the web.";
		break;

		case "mupdf-gl":
			details = "The OpenGL based viewer can read PDF, XPS, CBZ, EPUB, and FB2 documents. It compiles on any platform that has a GLUT library. The latest release builds on Linux, Windows, and MacOS.";
		break;

		case "Java Viewer":
			details = "The Java Viewer exemplifies how to use Java to write desktop applications which utilize the MuPDF core library.";
		break;

		case "MuPDF Android Library":
			details = "The MuPDF Android Library provides low level access to the MuPDF library using a handful of simple Java classes.<p/>Use this to build your own MuPDF Android library.";
		break;

		case "WASM Viewer":
			details = "A simple web application that uses MuPDF to render pages as images. You can scroll through the document, and it will render pages as they come into view. You can change the zoom level, follow links on the page and in the table of contents.<p/>If you want to build a web application using MuPDF and write your own custom UI, then this is the best place to start.";
		break;

		case "iOS App Kit":
			details = "The iOS App Kit allows you to use the MuPDF library within your iOS Xcode projects as an embedded framework.<p/>This allows developers to easily build iPhone and iPad apps which can view and/or manipulate PDF documents.";
		break;

		case "Android App Kit":
			details = "The Android App Kit allows you to use the MuPDF library within your Android Studio projects as pre-built artifacts.<p/>This allows developers to easily build Android apps which can view and/or manipulate PDF documents.";
		break;

		case "mupdf-android-mini lib":
			details = "A bespoke library for development of Android 'MuPDF mini' style apps - MuPDF mini applications allow for viewing PDF files in a read only mode.";
		break;

		case "mupdf-android-viewer lib":
			details = "A bespoke library for development of Android 'MuPDF viewer' style apps - MuPDF viewer applications allow for viewing & editing of PDF files.";
		break;

		case "iOS App Kit example":
			details = "A sample Xcode project which uses the power of App Kit to present PDF documents from a file system.";
		break;

		case "Android App Kit example":
			details = "A sample Android Studio project which uses the power of App Kit to present PDF documents from a file system.";
		break;

		case "mupdf-android-mini App":
			details = "A sample MuPDF mini application for Android.";
		break;

		case "mupdf-android-viewer App":
			details = "A sample MuPDF viewer application for Android.";
		break;

		default:
			details = "The heart of MuPDF. A portable library that offers a C API for opening / rendering / manipulating PDF (and other) file formats. <p/>Use this if you want to write utilities to process or display documents in C.";
		break;
	}
	document.getElementById("lightboxTitle").innerHTML = str;
	document.getElementById("lightboxDetails").innerHTML = details;
	document.getElementById("lightbox").classList.add("show");
}

function hideLightBox() {
	document.getElementById("lightbox").classList.remove("show");
}

</script>

<p>
There are many projects, viewers, tools, and libraries based on MuPDF.
The following diagram shows the official projects developed by Artifex.

<!-- lightbox for ecosystem diagram -->
<div id="lightbox" onclick="hideLightBox()">
	<div class="inner">
		<div class="text">
			<h2 id="lightboxTitle"></h2>
			<div id="lightboxDetails"></div>
		</div>
	</div>
</div>

<!-- start ecosystem diagram -->
<div class="ecosystem-base">

	<div class="container">
		<div class="block twenty">
			<div class="outer">
				<div class="inner ios">
					<div class="info" onClick="showLightBox('iOS App Kit example')"></div>
					<div class="text">iOS App Kit example</div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner android">
					<div class="info" onClick="showLightBox('Android App Kit example')"></div>
					<div class="text">Android App Kit example</div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner android-mini">
					<div class="info" onClick="showLightBox('mupdf-android-mini App')"></div>
					<div class="text">mupdf-android-mini App</div>
					<div class="link"><a href="https://play.google.com/store/apps/details?id=com.artifex.mupdf.mini.app" target=_blank>Download on Google Play</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner android-viewer">
					<div class="info" onClick="showLightBox('mupdf-android-viewer App')"></div>
					<div class="text">mupdf-android-viewer App</div>
					<div class="link"><a href="https://play.google.com/store/apps/details?id=com.artifex.mupdf.viewer.app" target=_blank>Download on Google Play</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty invisible">
			<div class="outer">
				<div class="inner"></div>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>
		</div>
	</div>

	<div class="container">
		<div class="block twenty">
			<div class="outer">
				<div class="inner ios">
					<div class="info" onClick="showLightBox('iOS App Kit')"></div>
					<div class="text">iOS App Kit</div>
					<div class="link"><a href="https://mupdf.com/appkit/mupdf-ios-getting-started" target=_blank>View documentation</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner android">
					<div class="info" onClick="showLightBox('Android App Kit')"></div>
					<div class="text">Android App Kit</div>
					<div class="link"><a href="https://mupdf.com/appkit/mupdf-android-getting-started" target=_blank>View documentation</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner android-mini">
					<div class="info" onClick="showLightBox('mupdf-android-mini lib')"></div>
					<div class="text">mupdf-android-mini lib</div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner android-viewer">
					<div class="info" onClick="showLightBox('mupdf-android-viewer lib')"></div>
					<div class="text">mupdf-android-viewer lib</div>
				</div>
			</div>
		</div>

		<div class="block twenty invisible">
			<div class="outer">
				<div class="inner"></div>
			</div>
		</div>
	</div>

	<!--- ROW D --->
	<div class="container">
		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill curve-bottom-left"></div>
			<div class="sq fill"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq fill"></div>
			<div class="sq fill"></div>
			<div class="sq fill"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq fill"></div>
			<div class="sq fill curve-bottom-right"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>
		</div>
	</div>

	<div class="container">
		<div class="block twenty">
			<div class="nineSquare long">
				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner coreMuPDF">
					<div class="info" onClick="showLightBox('Java Viewer')"></div>
					<div class="text">Java Viewer</div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner fitz">
					<div class="info" onClick="showLightBox('MuPDF Android Library')"></div>
					<div class="text">MuPDF Android Library</div>
					<div class="link"><a href="https://mupdf.com/docs/android-sdk.html" target=_blank>View documentation</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty invisible">
			<div class="outer">
				<div class="inner"></div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner coreMuPDF">
					<div class="info" onClick="showLightBox('Python Bindings')"></div>
					<div class="text">Python Bindings</div>
					<div class="link"><a href="https://mupdf.com/r/C-and-Python-APIs" target=_blank>View documentation</a></div>
				</div>
			</div>
		</div>
	</div>

	<!--- ROW C --->
	<div class="container">
		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill curve-bottom-left"></div>
			<div class="sq fill"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq fill"></div>
			<div class="sq fill"></div>
			<div class="sq  fill"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>

			<div class="sq fill"></div>
			<div class="sq fill curve-top-right"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>
	</div>

	<div class="container">
		<div class="block twenty">
			<div class="nineSquare long">
				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>
			</div>
		</div>

		<div class="block twenty">
			<div class="nineSquare long">
				<div class="sq"></div>
				<div class="sq"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq"></div>
				<div class="sq"></div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner coreMuPDF">
					<div class="info" onClick="showLightBox('WASM Viewer')"></div>
					<div class="text">WASM Viewer</div>
					<div class="link"><a href="https://mupdf.com/wasm/demo/view.html?file=mupdf_explored.pdf" target=_blank>Try demo</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner coreMuPDF">
					<div class="info" onClick="showLightBox('Java Bindings')"></div>
					<div class="text">Java Bindings</div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner coreMuPDF">
					<div class="info" onClick="showLightBox('C++ Bindings')"></div>
					<div class="text">C++ Bindings</div>
					<div class="link"><a href="https://mupdf.com/r/C-and-Python-APIs" target=_blank>View documentation</a></div>
				</div>
			</div>
		</div>
	</div>

	<!--- ROW B --->
	<div class="container">
		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>

			<div class="sq coreMuPDF mutool">mutool run</div>
			<div class="sq coreMuPDF mutool">mutool draw</div>
			<div class="sq coreMuPDF mutool">mutool clean</div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill curve-bottom-left"></div>
			<div class="sq fill"></div>

			<div class="sq"></div>
			<div class="sq"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq fill"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>
	</div>

	<div class="container">
		<div class="block twenty">
			<div class="nineSquare long">
				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner coreMuPDF">
					<div class="info" onClick="showLightBox('mutool')"></div>
					<div class="text">mutool</div>
					<div class="link"><a href="https://mupdf.com/docs/manual-mutool-run.html" target=_blank>View documentation</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner coreMuPDF">
					<div class="info" onClick="showLightBox('WASM')"></div>
					<div class="text">WASM</div>
					<div class="link"><a href="https://mupdf.com/wasm" target=_blank>View documentation</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="outer">
				<div class="inner coreMuPDF">
					<div class="info" onClick="showLightBox('mupdf-gl')"></div>
					<div class="text">mupdf-gl</div>
					<div class="link"><a href="https://www.mupdf.com/docs/manual-mupdf-gl.html" target=_blank>View documentation</a></div>
				</div>
			</div>
		</div>

		<div class="block twenty">
			<div class="nineSquare long">
				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>

				<div class="sq"></div>
				<div class="sq fill"></div>
				<div class="sq"></div>
			</div>
		</div>
	</div>

	<!--- ROW A --->
	<div class="container">
		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>

		<div class="nineSquare">
			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>

			<div class="sq"></div>
			<div class="sq fill"></div>
			<div class="sq"></div>
		</div>
	</div>

	<div class="container">
		<div class="block oneHundred base">
			<div class="inner base coreMuPDF">
				<div class="info" onClick="showLightBox('libmupdf')"></div>
				<div class="text">
					<h1>libmupdf</h1>
				</div>
				<div class="link">
					<a href="https://www.mupdf.com/docs/index.html" target=_blank>View documentation</a>
				</div>
			</div>
		</div>
	</div>

	<div class="key">
		<div class="block">
			<div class="inner coreMuPDF"></div>
			<div class="text">Core MuPDF</div>
		</div>
		<div class="link"><a href="https://github.com/ArtifexSoftware/mupdf" target=_blank>Checkout on Github</a></div>

		<div class="block">
			<div class="inner fitz"></div>
			<div class="text">MuPDF Android Library</div>
		</div>
		<div class="link"><a href="https://github.com/ArtifexSoftware/mupdf-android-fitz" target=_blank>Checkout on Github</a></div>

		<div class="block">
			<div class="inner ios"></div>
			<div class="text">iOS App Kit</div>
		</div>
		<div class="link"><a href="https://github.com/ArtifexSoftware/mupdf-ios-appkit" target=_blank>Checkout on Github</a></div>

		<div class="block">
			<div class="inner android"></div>
			<div class="text">Android App Kit</div>
		</div>
		<div class="link"><a href="https://github.com/ArtifexSoftware/mupdf-android-appkit" target=_blank>Checkout on Github</a></div>

		<div class="block">
			<div class="inner android-mini"></div>
			<div class="text">mupdf-android-mini</div>
		</div>
		<div class="link"><a href="https://github.com/ArtifexSoftware/mupdf-android-viewer-mini" target=_blank>Checkout on Github</a></div>

		<div class="block">
			<div class="inner android-viewer"></div>
			<div class="text">mupdf-android-viewer</div>
		</div>
		<div class="link"><a href="https://github.com/ArtifexSoftware/mupdf-android-viewer" target=_blank>Checkout on Github</a></div>
	</div>

</div><!-- end ecosystem diagram -->

<dl>

<dt>libmupdf
<dd>The C library that is the foundation for everything MuPDF.

<dt>mupdf-gl
<dd>The viewer application for Linux and Windows.

<dt>mupdf-x11
<dd>The original viewer application for Linux and Windows.

<dt>mutool
<dd>The command line tool suite.

<dt>Java Bindings
<dd>The JNI bindings and Java classes that expose a low-level Java API to the MuPDF library.

<dt>Java Desktop Example
<dd>A simple viewer application written in Java. It runs on Mac, Linux, and Windows.

<dt>WASM Library
<dd>A WebAssembly library and simple high-level API.

<dt>WASM Viewer
<dd>A single HTML page web application using the WASM library to display PDF files in the browser.

<dt>mupdf-android-fitz
<dd>An Android library that provides the Java bindings for use with Android apps.

<dt>mupdf-android-mini lib and app
<dd>The "MuPDF mini" app that is on Google Play.
This basic viewer is designed to be a tutorial and example for how to create an Android app from scratch using the MuPDF library.
It can also be used as-is to provide an Activity that can be used to display PDF files in other Android apps.

<dt>mupdf-android-viewer lib and app
<dd>The "MuPDF viewer" app that is on Google Play.
This viewer has a more polished UI, but as a result is a lot more complicated and difficult to customize and learn from.

<dt>MuPDF iOS SDK and Example
<dd>A full featured software development kit and example app for iOS.

<dt>MuPDF Android SDK and Example
<dd>A full featured software development kit and example app for Android.

</dl>

</article>

<footer>
<a href="http://www.artifex.com/"><img src="artifex-logo.png" align="right"></a>
Copyright &copy; 2006-2018 Artifex Software Inc.
</footer>

</body>
</html>
